<template>
  <!-- 头部 -->
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片 -->
  <el-card class="box-card">
    <!-- 添加按钮 -->
    <div>
      <el-button type="primary"
                 size="large"
                 @click="AddCommodity">添加商品</el-button>
    </div>
    <!-- 表格 -->
    <div class="py-4">
      <el-table :data="tableData"
                border
                style="width: 100%">
        <el-table-column type="index"
                         label="#" />
        <el-table-column prop="goods_name"
                         label="商品名称" />
        <el-table-column prop="goods_price"
                         label="价格原价" />
        <el-table-column prop="discount_price"
                         label="折扣价" />
        <el-table-column prop="id"
                         label="分类">
          <template #default="id">
            <div v-for="item in DataLists"
                 :key="item.id">
              <span v-if="item.id == id.row.goods_id">{{item.cat_name}}
                <div v-for="item1 in item.dw_fenns"
                     :key="item1.id">
                  <div v-if="item1.id == id.row.goods_pid">{{item1.cat_name}}</div>
                </div>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="goods_num"
                         label="库存" />
        <el-table-column prop="goods_size"
                         label="商品尺寸" />
        <el-table-column prop="deletedAt"
                         label="是否上架">
          <template #default="id">
            <div v-if="id.row.deletedAt === null">
              <el-tag size="large"
                      type="danger">下架</el-tag>
            </div>
            <div v-else>
              <el-tag size="large">上架</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name"
                         label="操作"
                         width="235px">
          <template #default="id">
            <el-button v-if="id.row.deletedAt === null"
                       type="success"
                       size="large"
                       :icon="Edit"
                       @click="IdNo(id.row.id)">上架</el-button>
            <el-button v-else
                       type="danger"
                       size="large"
                       :icon="Edit"
                       @click="IdYes(id.row.id)">下架</el-button>
            <el-button type="primary"
                       size="large"
                       :icon="Edit">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
import { ArrowRight } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { CommodityList, YesJia, NoJia, DataList } from "@/api/manager.js";
import { Edit, Delete } from '@element-plus/icons-vue'
import router from '@/router'
import { ElMessage } from 'element-plus'

export default {
  name: 'List',
  setup () {
    const tableData = ref([])
    const DataLists = ref([])
    // 获取商品列表
    CommodityList().then(res => {
      tableData.value = res.data.result.list
      console.log(res.data.result.list)
    })
    // 获取分类列表
    DataList().then(res => {
      DataLists.value = res.data.result
      console.log(DataLists.value)
    })
    // 点击跳转添加商品
    const AddCommodity = () => {
      router.push('/Commodity')
    }
    // 下架
    const IdYes = (value) => {
      console.log('上架', value);
      YesJia(value).then(res => {
        ElMessage({
          type: 'success',
          message: '下架成功!',
          duration: 800
        })
        // 获取商品列表
        CommodityList().then(res => {
          tableData.value = res.data.result.list
        })
      }).catch(err => {
        ElMessage({
          message: err.response.data.message,
          type: 'error',
          duration: 800
        })
      })
    }
    // 上架 
    const IdNo = (value) => {
      console.log('下架', value);
      NoJia(value).then(res => {
        ElMessage({
          type: 'success',
          message: '上架成功!',
          duration: 800
        })
        // 获取商品列表
        CommodityList().then(res => {
          tableData.value = res.data.result.list
        })
      }).catch(err => {
        ElMessage({
          message: err.response.data.message,
          type: 'error',
          duration: 800
        })
      })
    }
    return {
      ArrowRight,
      tableData,
      Edit,
      Delete,
      AddCommodity,
      IdYes,
      IdNo,
      DataLists
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
  width: 100%;
  margin-top: 20px;
}
</style>
